<script setup lang="ts">
import { Echart } from '@/components/Echart'
import {barOptions } from './echarts-data'
import { ref, reactive } from 'vue'
import {getTableList2Api} from '@/api/table'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const loading = ref(true)

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// 课程点赞热度统计图
const getMonthlySales = async () => {
  const res = await getTableList2Api().catch(() => {})

  if (res) {
    set(
        barOptionsData,
        'xAxis.data',
        res.data.map((v) => t(v.courseClassName))
    )
    set(barOptionsData, 'series', [
      {
        name: t('tongJi.kcdzrd'),
        data: res.data.map((v) => v.LookNum),
        type: 'bar'
      }
    ])
  }
}

const getAllApi = async () => {
  await Promise.all([getMonthlySales()])
  loading.value = false
}

getAllApi()
</script>

<template>
  <ElRow>
    <ElCol>
      <ElCard shadow="hover" class="mb-20px">
        <Echart :options="barOptionsData" :height="350" />
      </ElCard>
    </ElCol>
  </ElRow>
</template>
